<template>
  <div class="echarts_box">
    <div
      class="echarts_box"
      ref="echarts_box"
      :style="{ opacity: data.length == 0 ? '0' : '1' }"
    ></div>
    <!---------------------- 无数据是显示 ---------------------->
    <Nodata class="Nodata" v-show="data.length == 0"></Nodata>
  </div>
</template>

<script>
import fontSize from "@/modules/fontSize";
export default {
  mounted() {
    /* 重新渲染图表 */
    this.drawLine();
  },
  data() {
    return {
      // theme: this.json.theme, //主题颜色
    };
  },
  props: {
    //父组件传入的数据
    data: {
      type: Array | Object,
      default: () => [],
    },
    label: {
      type: String,
      default: "",
    },
    axisLabelShow: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    data: "drawLine", // 数值变化是更新图表
    label: "drawLine", // 数值变化是更新图表
    axisLabelShow: "drawLine", // 数值变化是更新图表
  },
  methods: {
    //渲染echarts
    drawLine() {
      this.$nextTick(() => {
        try {
          let that = this;
          let myChart = this.$echarts.init(this.$refs.echarts_box);
          let xData = [];
          let yData = [];
          for (let item of this.data) {
            xData.push(item.name);
            yData.push(item.value);
          }
          let option = {
            // title: {
            //   text: "一周内人员出入总数变化图",
            //   textStyle: {
            //     fontSize: 25,
            //     fontWeight: "normal",
            //     color: "#fff",
            //   },
            //   x: "center",
            // },
            // backgroundColor: "#05224d",
            grid: {
              top: "15%",
              left: "5%",
              right: "5%",
              bottom: "5%",
              containLabel: true,
            },
            // legend: {
            //   itemGap: 50,

            //   data: ["人员出入总数"],
            //   textStyle: {
            //     color: "#0a7dad",
            //     borderColor: "#fff",
            //   },
            // },
            tooltip: {
              show: true,
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: true,
                axisLine: {
                  //坐标轴轴线相关设置。数学上的x轴
                  show: true,
                  lineStyle: {
                    color: "#0a7dad",
                  },
                },

                axisLabel: {
                  // margin: 20,
                  textStyle: {
                    color: "#ffffff",
                    fontSize: fontSize.fontSize(0.084),
                  },
                  formatter: (value) => {
                    var ret = ""; //拼接加\n返回的类目项
                    var maxLength = 10; //每项显示文字个数
                    var valLength = value.length; //X轴类目项的文字个数
                    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                    if (rowN > 1) {
                      //如果类目项的文字大于4,
                      for (var i = 0; i < rowN; i++) {
                        var temp = ""; //每次截取的字符串
                        var start = i * maxLength; //开始截取的位置
                        var end = start + maxLength; //结束截取的位置
                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                        temp = value.substring(start, end) + "\n";
                        ret += temp; //凭借最终的字符串
                      }
                      return ret;
                    } else {
                      return value;
                    }
                  },
                },
                axisTick: {
                  show: false,
                },
                data: xData,
              },
            ],
            yAxis: [
              {
                type: "value",
                // min: 30,
                // max: 140,
                interval: 1,
                splitNumber: 7,
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: "rgba(255,255,255,0.1)",
                  },
                },
                axisLine: {
                  show: true,
                  lineStyle: {         
                    color: "#0a7dad",
                  },
                },
                axisLabel: {
                  show: this.axisLabelShow,
                  // margin: 10,
                  textStyle: {
                    color: "#ffffff",
                    fontSize: fontSize.fontSize(0.084),
                  },
                },
                axisTick: {
                  show: false,
                },
              },
            ],
            series: [
              {
                // name: "注册总量",
                type: "line",
                smooth: false, //是否平滑曲线显示
                symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
                showAllSymbol: true,
                symbol: "emptyCircle",
                lineStyle: {
                  normal: {
                    color: "rgba(4,251,242,1)", // 线条颜色
                  },
                  borderColor: "#f0f",
                },
                label: {
                  show: false,
                  position: "top",
                  textStyle: {
                    color: "#fff",
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#ffffff",
                    label: {
                      show: true, //开启显示
                      position: "top", //在上方显示 insideRight /top /right
                      textStyle: {
                        //数值样式
                        color: "#ffffff",
                        fontSize: fontSize.fontSize(0.08),
                        fontWeight: 600,
                        lineHeight: fontSize.fontSize(0.09),
                      },
                      formatter: (params) => {
                        return this.label + "\n" + params.data;
                      },
                    },
                  },
                },
                tooltip: {
                  show: true,
                  trigger: "axis",
                  axisPointer: {
                    type: "shadow",
                    shadowStyle: {
                      color: "rgba(0,0,0,0)",
                      shadowColor: "rgba(225,225,225,0)",
                      shadowBlur: 0,
                    },
                  },
                },
                areaStyle: {
                  //区域填充样式
                  normal: {
                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                    color: new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(0,154,120,0)",
                        },
                        {
                          offset: 0,
                          color: "rgba(0,154,120,0)",
                        },
                        {
                          offset: 1,
                          color: "rgba(0,0,0, 0)",
                        },
                      ],
                      false
                    ),
                    shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                    shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                  },
                },
                data: yData,
              },
            ],
          };
          myChart.setOption(option);
          myChart.off("click");
          /* 点击事件 */
          myChart.on("click", (params) => {});
          /* 大小自适应 */
          window.addEventListener("resize", function () {
            myChart.resize();
          });
        } catch (err) {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.echarts_box {
  width: 100%;
  height: 100%;
  position: relative;
  .Nodata {
    position: absolute;
    top: 0;
    z-index: 10;
  }
}
</style>
